<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_50 relative">
      <bigscreen-header :headerName="contestName" />
    </div>

    <div class="w_full m_0_auto h_full-50 p_10">
      <div class="w_full h_60 lh_60 flex_row_start fs_1_5vw color_fff ph_20">
        <div class="w_80 text_center">排名</div>

        <div class="w_full-130 h_full flex_row_start ml_30">
          <div class="w_100 text_center">编号</div>
          <div class="w_100 text_center">得分</div>
          <div class="w_200 text_center">养殖户</div>
          <div class="w_100 text_center">密度</div>
          <div class="w_100 text_center">弯曲度</div>
          <div class="w_100 text_center">细度</div>
          <div class="w_100 text_center">油汗</div>
          <div class="w_100 text_center">均匀度</div>
          <div class="w_100 text_center">腹毛</div>
          <div class="w_100 text_center color_orange">毛长</div>
          <div class="w_100 text_center color_orange">细度</div>
          <div class="w_100 text_center color_orange">剪毛量</div>
          <div class="w_200 text_center color_orange">剪毛后体重</div>
        </div>
      </div>

      <div class="w_full h_full-130 overflow_y_auto">
        <div 
          class="w_full h_80 lh_80 mb_10" 
          v-for="(item, index) in sheepSortList" :key="index"
        >
          <div class="full flex_row_start fs_1_5vw color_000 ph_20">
            <div class="w_80 h_80 text_center color_fff font_zh">{{ index + 1 }}</div>

            <div class="w_full-130 h_full flex_row_start border_1_s_ccc border_radius_10 bgc_fff ml_30">
              <div class="w_100 text_center font_zh">{{ item.sheepNumber }}</div>
              <div class="w_100 text_center font_zh">{{ item.totalScore }}</div>
              <div class="w_200 text_center ellipsis">{{ item.yzhName }}</div>
              <div class="w_100 text_center font_zh">{{ item.density }}</div>
              <div class="w_100 text_center font_zh">{{ item.wanQu }}</div>
              <div class="w_100 text_center font_zh">{{ item.xiDu }}</div>
              <div class="w_100 text_center font_zh">{{ item.oilSweat }}</div>
              <div class="w_100 text_center font_zh">{{ item.uniformity }}</div>
              <div class="w_100 text_center font_zh">{{ item.fuMao }}</div>
              <div class="w_100 text_center font_zh color_orange"></div>
              <div class="w_100 text_center font_zh color_orange"></div>
              <div class="w_100 text_center font_zh color_orange"></div>
              <div class="w_200 text_center font_zh color_orange"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getSheepSort } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'SheepSort',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestId: null,
        contestName: null,
        rfid: null,

        sheepSortList: [],
        currentSheep: {}
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      let rfid = this.$route.params.rfid
      
      this.contestId = contestId
      this.contestName = contestName
      this.rfid = rfid

      // 获取 羊 排名
      this.getSheepSort(contestId, rfid)
    },
    methods: {
      // 获取 房间中的 当前羊
      async getSheepSort(contestId, rfid) {
        let res = await getSheepSort(contestId, rfid)
        try {
          if (res.code == 1000) {
            this.sheepSortList = res.data.sheepList
            this.currentSheep = res.data.sheep
          }
        } catch(err) {
          console.log('获取羊排名失败 : ', err);
        }
      },

      // 格式化 羊 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list
      },

      formatAnimalGender() {

      },

      formatLevel() {

      },

      // 格式化 排名 icon
      formatJugdeIcon(val) {
        let icon = ''

        if (val == '1') {
          icon = 'first_icon'
        } else if (val == '2') {
          icon = 'sec_icon'
        } else if (val == '3') {
          icon = 'third_icon'
        } else {
          icon = 'val'
        }

        return icon
      }, 
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>